<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }

        p {
            border: 1px solid #000;
            /* 转成行内元素 */
            display: inline; 
            
        }

        span {
            border: 1px solid #000;
            /* 转成块元素 */
            display: block;
        }

        button {
            border: 1px solid #000;

        }
    </style>
</head>

<body>
    <div>
        <p>块元素</p>
        <span>行内元素</span>
        <button>行内块元素</button>
    </div>

    <!-- 总结
     块元素：独占一行，可以设置宽高；div、ul、dl、ol、li、table、h1-h6、p、form、hr
     行内元素：不独占一行，不能设置宽高；a、span、sub、sup、br、strong、b、em、i、label
     行内块元素：不独占一行，可以设置宽高。img、input、td
    -->
</body>

</html>